<template>
  <div>
    <Card title="通知设置" class="w-1/2 !m-10px min-w-700px">
      <template #extra>
        <Button type="primary" @click="reset">重置</Button>
      </template>
      <div class="border border-slate-300 p-10px">
        <Row class="my-20px">
          <Col span="12"
            ><Checkbox
              v-model:checked="typeChecked"
              @change="allChange($event)"
              :indeterminate="isTypeIndeterminate"
              >Type</Checkbox
            ></Col
          >
          <Col span="4">
            <Checkbox
              v-model:checked="SMSChecked"
              :indeterminate="isSMSeIndeterminate"
              @change="moduleChange($event, 'SMS')"
            >
              SMS
            </Checkbox>
          </Col>
          <Col span="4">
            <Checkbox
              v-model:checked="EMAILChecked"
              :indeterminate="isEMAILeIndeterminate"
              @change="moduleChange($event, 'EMAIL')"
            >
              Email
            </Checkbox>
          </Col>
          <Col span="4">
            <Checkbox
              v-model:checked="WEBChecked"
              :indeterminate="isWEBeIndeterminate"
              @change="moduleChange($event, 'WEB')"
            >
              Web
            </Checkbox>
          </Col>
        </Row>
        <template v-for="(val, key) in data?.prefs" :key="key">
          <Divider />
          <Row class="my-20px">
            <Col span="12"
              ><Checkbox
                v-model:checked="val.enabled"
                :indeterminate="isIndeterminate(val.enabledDeliveryMethods)"
                @change="typeChange($event, val.enabledDeliveryMethods)"
                >{{ keyWordsTranslation[key] }}</Checkbox
              ></Col
            >
            <Col span="4">
              <Checkbox
                v-model:checked="val.enabledDeliveryMethods.SMS"
                @change="itemChange(val)"
              />
            </Col>
            <Col span="4"
              ><Checkbox
                v-model:checked="val.enabledDeliveryMethods.EMAIL"
                @change="itemChange(val)"
            /></Col>
            <Col span="4"
              ><Checkbox v-model:checked="val.enabledDeliveryMethods.WEB" @change="itemChange(val)"
            /></Col>
          </Row>
        </template>
      </div>
      <Button type="primary" class="float-right mt-20px" @click="save" :disabled="!isEdit"
        >保存</Button
      >
    </Card>
  </div>
</template>
<script lang="ts" setup>
  import { Card, Checkbox, Button, Row, Col, Divider } from 'ant-design-vue';
  import { getNotification, postNotification } from '/@/api/thingsborad/account/account';
  import { ref, onMounted, computed } from 'vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { keyWordsTranslation, resetNotificationData } from './form.data';
  const { createMessage } = useMessage();
  //通知设置数据
  let data = ref<Recordable>({});
  let isEdit = ref<boolean>(false);
  //Type checkbox值
  let typeChecked = computed(() => {
    return Object.values(data.value.prefs || {}).every((pref: Recordable) => pref.enabled);
  });
  //Type checkbox半选状态
  let isTypeIndeterminate = computed(() => {
    if (!data.value.prefs) return false;
    const prefsValues = Object.values(data.value.prefs);
    const someEnabled = prefsValues.some((pref: Recordable) => pref.enabled);
    const allEnabled = prefsValues.every((pref: Recordable) => pref.enabled);
    return someEnabled && !allEnabled;
  });
  //SMS checkbox值
  let SMSChecked = computed(() => {
    return Object.values(data.value.prefs || {}).every(
      (pref: Recordable) => pref.enabledDeliveryMethods.SMS,
    );
  });
  //SMS checkbox半选状态
  let isSMSeIndeterminate = computed(() => {
    if (!data.value.prefs) return false;
    const prefsValues = Object.values(data.value.prefs);
    const someEnabled = prefsValues.some((pref: Recordable) => pref.enabledDeliveryMethods.SMS);
    const allEnabled = prefsValues.every((pref: Recordable) => pref.enabledDeliveryMethods.SMS);
    return someEnabled && !allEnabled;
  });
  //EMAIL checkbox值
  let EMAILChecked = computed(() => {
    return Object.values(data.value.prefs || {}).every(
      (pref: Recordable) => pref.enabledDeliveryMethods.EMAIL,
    );
  });
  //EMAIL checkbox半选状态
  let isEMAILeIndeterminate = computed(() => {
    if (!data.value.prefs) return false;
    const prefsValues = Object.values(data.value.prefs);
    const someEnabled = prefsValues.some((pref: Recordable) => pref.enabledDeliveryMethods.EMAIL);
    const allEnabled = prefsValues.every((pref: Recordable) => pref.enabledDeliveryMethods.EMAIL);
    return someEnabled && !allEnabled;
  });
  //WEB checkbox值
  let WEBChecked = computed(() => {
    return Object.values(data.value.prefs || {}).every(
      (pref: Recordable) => pref.enabledDeliveryMethods.WEB,
    );
  });
  //WEB checkbox半选状态
  let isWEBeIndeterminate = computed(() => {
    if (!data.value.prefs) return false;
    const prefsValues = Object.values(data.value.prefs);
    const someEnabled = prefsValues.some((pref: Recordable) => pref.enabledDeliveryMethods.WEB);
    const allEnabled = prefsValues.every((pref: Recordable) => pref.enabledDeliveryMethods.WEB);
    return someEnabled && !allEnabled;
  });
  onMounted(async () => {
    await getData();
  });
  //获取通知设置
  async function getData() {
    data.value = await getNotification();
  }
  //Type下checkbox的半选状态
  function isIndeterminate(val: Recordable) {
    return (val.SMS || val.EMAIL || val.WEB) && !(val.SMS && val.EMAIL && val.WEB);
  }
  //Type下checkbox的change事件
  function typeChange(change: any, data: Recordable) {
    let checked = change.target.checked;
    data.EMAIL = checked;
    data.SMS = checked;
    data.WEB = checked;
    handleChange();
  }
  //SMS,EMAIL,WEB下checkbox的change事件
  function itemChange(val: Recordable) {
    //都不选把对应type下的改为false
    if (
      val.enabledDeliveryMethods.SMS ||
      val.enabledDeliveryMethods.EMAIL ||
      val.enabledDeliveryMethods.WEB
    ) {
      val.enabled = true;
    } else {
      val.enabled = false;
    }
    handleChange();
  }
  //type checkBox的change事件
  function allChange(change: any) {
    let checked = change.target.checked;
    for (const pref of Object.values(data.value.prefs || {}) as Recordable[]) {
      pref.enabled = checked;
      if (checked) {
        pref.enabledDeliveryMethods.SMS = true;
        pref.enabledDeliveryMethods.EMAIL = true;
        pref.enabledDeliveryMethods.WEB = true;
      } else {
        // 如果取消全选，也需要重置所有子项
        pref.enabledDeliveryMethods.SMS = false;
        pref.enabledDeliveryMethods.EMAIL = false;
        pref.enabledDeliveryMethods.WEB = false;
      }
    }
    handleChange();
  }
  //SMS,EMAIL,WEB  checkbox的change事件
  function moduleChange(change: any, module: string) {
    let checked = change.target.checked;
    for (const pref of Object.values(data.value.prefs || {}) as Recordable[]) {
      pref.enabledDeliveryMethods[module] = checked;
    }
    handleChange();
  }
  function handleChange() {
    isEdit.value = true;
  }
  //重置
  async function reset() {
    try {
      await postNotification(resetNotificationData);
      createMessage.success('重置成功');
      await getData();
      isEdit.value = false;
    } catch (e) {
      createMessage.error('重置失败');
    }
  }
  async function save() {
    try {
      await postNotification(data.value);
      createMessage.success('保存成功');
      isEdit.value = false;
      await getData();
    } catch (e) {
      createMessage.error('保存失败');
    }
  }
</script>

<style lang="less" scoped>
  .ant-checkbox-wrapper {
    font-size: 16px;
  }
  .ant-divider-horizontal {
    margin: 0;
  }
</style>
